<template>
	<div class="storehouse">
		<head-title title="设置--仓库设置"></head-title>
		<el-card>
			<el-form :model="infoForm" :rules="infoFormRules" ref="infoForm" label-width="120px">
				<div class="content-info">
					<el-form-item label="电话:" prop="mobile"><el-input v-model="infoForm.mobile" placeholder="请输入手机号码" clearable></el-input></el-form-item>
					<el-form-item label="联系人:" prop="consignee"><el-input v-model="infoForm.consignee" placeholder="请输入联系人名称" clearable></el-input></el-form-item>
					<div class="provinceCityArea">
						<el-row>
							<el-col :span="8">
								<el-form-item label="省:" prop="province_id">
									<el-select v-model="infoForm.province_id" placeholder="省" @change="province">
										<el-option v-for="item in cityJson" :key="item.areaId" :label="item.areaName" :value="item.areaId"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="市:" prop="city_id">
									<el-select v-model="infoForm.city_id" placeholder="市" @change="citySelect">
										<el-option v-for="item in cityList" :key="item.areaId" :label="item.areaName" :value="item.areaId"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="区:" prop="district_id">
									<el-select v-model="infoForm.district_id" placeholder="区">
										<el-option v-for="item in areaList" :key="item.areaId" :label="item.areaName" :value="item.areaId"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
					</div>
					<el-form-item label="详细地址:" prop="address"><el-input v-model="infoForm.address" placeholder="请输入详细地址" clearable></el-input></el-form-item>
					<el-button type="primary" style="margin-left: 38px;" @click="submitForm('infoForm')">保存</el-button>
				</div>
			</el-form>
		</el-card>
	</div>
</template>

<script>
export default {
	data() {
		return {
			cityJson: '',
			cityList: '',
			areaList: '',
			factoryInfo: '',
			infoForm: {
				mobile: '',
				consignee: '',
				province_id: '',
				city_id: '',
				district_id: '',
				address: ''
			},
			// 校对规则
			infoFormRules: {
				consignee: [{ required: true, message: '请输入联系人名称' }],
				mobile: [{ required: true, message: '请输入联系方式' }],
				province_id: [{ required: true, message: '请选择省份' }],
				city_id: [{ required: true, message: '请选择城市' }],
				district_id: [{ required: true, message: '请选择区' }],
				address: [{ required: true, message: '请输入详细地址' }]
			}
		};
	},
	methods: {
		// 初始化列表
		init() {
			let data = {};
			this.cityJson = require('@/utils/city.json');
			this.$http(this.$ApiList.Warehouse, data).then(res => {
				if(res.datas == null){
					return
				}
				this.infoForm = res.datas;
				for (let i in this.cityJson) {
					if (this.cityJson[i].areaId == this.infoForm.province_id) {
						this.cityList = this.cityJson[i].cities;
					}
				}
				for (let j in this.cityList) {
					if (this.cityList[j].areaId == this.infoForm.city_id) {
						this.areaList = this.cityList[j].cities;
					}
				}
			});
			//console.log(cityJson)
		},
		province() {
			for (let i in this.cityJson) {
				if (this.cityJson[i].areaId == this.infoForm.province_id) {
					this.cityList = this.cityJson[i].cities;
				}
			}
			this.infoForm.city_id = this.cityList[0].areaId;
			this.citySelect();
		},
		citySelect() {
			for (let i in this.cityList) {
				if (this.cityList[i].areaId == this.infoForm.city_id) {
					this.areaList = this.cityList[i].cities;
				}
			}
			this.infoForm.district_id = this.areaList[0].areaId;
		},
		//提交
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.$http(this.$ApiList.UpWarehouse, this.infoForm).then(res => {
							this.$layer.msg('保存成功');
					});
				} else {
					this.$layer.msg('请填写完整信息后提交');
				}
			});
		}
	},
	created() {
		this.init();
	}
};
</script>
<style>
.storehouse .content-info {
	width: 700px;
}
</style>
